<template>
    <div class="adminList">
        <!-- 模糊查询 -->
        <div class="container">
            <header>
                <!-- 添加账号 -->
                <div>
                    <Button @click="add" type='info'>
                        <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                    </Button>
                </div>
                <div>
                    <Input
                        placeholder="请输入登录账号/用户昵称进行查询"
                        class="w-input"
                        v-model.trim="searchKey"
                        @on-keyup.enter="vagueSearch"
                        clearable
                    />
                    <Button type="primary" icon="ios-search" @click="vagueSearch"></Button>                  
                </div>
            </header>
            <!-- 列表 -->
            <div class="list">
                <Table :columns="list" :data="data1" stripe></Table>
            </div>
            <!-- 分页 -->
            <div class="page">
                <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage" v-show="!flag"/>
            </div>
            <!-- 账号新增弹窗 -->
            <Modal
                v-model="addModal"
                title="账号新增"
                width="660px"
                footer-hide
            >
                <add @showaddModal = 'showaddModal' />
            </Modal>
            <!-- 账号编辑弹窗 -->
            <Modal
                v-model="editModal"
                title="账号编辑"
                width="660px"
                footer-hide                 
            >
                <edit @showeditModal='showeditModal' ref="child1"/>
            </Modal>
            <Modal
                v-model="JurisdictionModal"
                title="用户权限管理"
                footer-hide
            >
                <Jurisdiction @showJurisdictionModal = 'showJurisdictionModal' ref="child2" />
            </Modal>
            <Modal
                v-model="showConfirmModal"
                title="清空权限提示"
                footer-hide>
                <div class="content">
                    <p class="tip">是否确定清空用户权限？</p>
                    <div slot="footer">
                        <div class="btn-group">
                            <Button class="left btn" type="primary" :loading="delBtnLoading" @click="handleConfirm">确认</Button>
                            <Button class="right btn" @click="showConfirmModal = false">取消</Button>
                        </div>
                    </div>
                </div>
            </Modal>
        </div>
        <!--CA绑定弹框-->
        <BindCaModalCom ref="bindCaModal" @success="loadUserData" />

        <!--CA解绑弹框-->
        <UnBindCaModalCom ref="unBindCaModal" @success="loadUserData" />
    </div>
</template>
<script>
import cookie from "../../../../utils/cookie.js";
import api from "@/api/commonApi";
import add from "./components/add";
import edit from "./components/edit";
import Jurisdiction from "./components/Jurisdiction";
import BindCaModalCom from "./components/BindCaModalCom.vue";
import UnBindCaModalCom from "./components/UnbindCaModalCom.vue";
export default {
    components: {
        add,
        edit,
        Jurisdiction,
        BindCaModalCom,
        UnBindCaModalCom
    },
    data() {
        return {
            userId:null,
            showConfirmModal:false,
            addModal: false,
            editModal: false,
            JurisdictionModal: false,
            count: 0,
            pageNo: 1,
            pageSize: 10,
            searchKey: "",
            list: [
                {
                    title: "排序",
                    key: "num",
                    align: "center",
                    width: 80,
                    render: (h, params) => {
                        let num = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", num);
                    }
                },
                {
                    title: "账号",
                    key: "userName",
                    align: "center",
                    width: 200
                },
                {
                    title: "昵称",
                    key: "nickName",
                    align: "center",
                },
                {
                    title: "手机号",
                    key: "phone",
                    align: "center",
                },
                {
                    title: "头像",
                    key: "avatar",
                    align: "center",
                    width: 220,
                    render: (h, params) => {
                        let avatar = this.pictureFormat(params.row.userIcon);
                        if (Boolean(avatar)) {
                            avatar = this.fileBaseUrl + avatar;
                        }
                        return h("img", {
                            attrs: {
                                src: avatar || "./static/img/doctor.png",
                                style:
                                    "width:40px;height:40px;border-radius:50%;"
                            }
                        });
                    }
                },
                {
                    title: "用户身份",
                    key: "identity",
                    align: "center",
                    render: (h, params) => {
                        let status = params.row.identity,
                            btnText = "";
                        if (status == 1) {
                            btnText = "超级管理员";
                        } else if(status == 2) {
                            btnText = "省级管理员";
                        }else if(status == 3) {
                            btnText = "市级管理员";
                        }else if(status == 4) {
                            btnText = "区级管理员";
                        }else if(status == 5) {
                            btnText = "机构管理员";
                        }
                        return h("span", {
                            domProps: {
                                innerHTML: btnText
                            }
                        });
                    }
                },
                {
                    title: "状态",
                    key: "status",
                    align: "center",
                    width: 100,
                    render: (h, params) => {
                        let status = params.row.status,
                            btnText = "";
                        if (status == 1) {
                            btnText = "启用";
                        } else {
                            btnText = "禁用";
                        }
                        return h("span", {
                            domProps: {
                                innerHTML: btnText
                            }
                        });
                    }
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    fixed:"right",
                    width: 280,
                    render: (h, params) => {
                        let id = params.row.id;
                        return [
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: '#5362e1',
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.editBanner(id)
                                        }
                                    }
                                },
                                "编辑"
                            ),
                             '|',
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: 'red',
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.delMenu(id)
                                        }
                                    }
                                },
                                "清空权限"
                            ),
                             '|',
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: '#21c780',
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.deploy(id)
                                        }
                                    }
                                },
                                "权限管理"
                            ),
                             '|',
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: '#ff9966',
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.changeRole(id)
                                        }
                                    }
                                },
                                "角色管理"
                            ),
                            '|',
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: '#ff9966',
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            if(params.row.caOid){
                                                this.onUnBindCaAccount(params.row)
                                            }else{
                                                this.onBindCaAccount(params.row)
                                            }
                                        }
                                    }
                                },
                                "CA"
                            )
                        ];
                    }
                }
            ],
            data1: [],
            id: ''
        };
    },
    mounted() {
        let pageNo = this.$route.query.pageNo;
        this.id = this.$route.query.id ? this.$route.query.id : ''
        if(this.id){
            this.editBanner(this.id)
        }
        if (Boolean(pageNo)) {
            this.pageNo = Number(pageNo);
        }
        // 预加载数据
        this.loadUserData();
        //查询密码强度
        this.$axios.post(api.findPasswordStrength,{}).then(res => {
            if(res.data.code==1){
                cookie.setCookie("levelp", res.data.object.password_level);
            }
        }).catch(err => {

        })
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/admin/user/list",
                title: "帐号权限配置"
            },
            {
                path: "/index/configuration/admin/user/list",
                title: "账号管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    methods: {
        onBindCaAccount(e){
            this.$refs.bindCaModal.show(e)
        },
        onUnBindCaAccount(e) {
            this.$refs.unBindCaModal.show(e)
        },
        //父组件关闭弹窗
        showeditModal(){
            this.editModal = false
            this.loadUserData();
        },
        showaddModal(){
            this.addModal = false
            this.loadUserData();
        },
        showJurisdictionModal(){
            this.JurisdictionModal = false
        },
        //编辑
        editBanner(id){
            this.$refs.child1.editBanner(id)
            this.editModal = true           
        },
        delMenu(id){
            this.userId = id;
            this.showConfirmModal = true;
        },
        handleConfirm(){
            this.delBtnLoading = true;
            this.$axios.post(api.delDhtboOperateUserMenu, {
                userId: this.userId
            }).then(res => {
                this.showConfirmModal = false;
                this.delBtnLoading = false;
                this.$Message.info("成功清空权限菜单");
            })
        },
        //权限配置
        deploy(id){
            this.$refs.child2.deploy(id)
            this.JurisdictionModal = true
        },
        //角色配置
        changeRole(id){
            let query = {
                id,
            };
            this.functionJS.queryNavgationTo(
                this,
                "/index/configuration/admin/user/roleinfo",
                //公用方法
                query
            );
        },
        // 添加角色
        add() {
            this.addModal = true
        },
        // 分页器改变
        loadPage(pageNo) {
            this.pageNo = pageNo;
            if (this.searchKey != "") {
                this.loadUserData(this.searchKey);
            } else {
                this.loadUserData();
            }
        },
        // 模糊查询
        vagueSearch() {
            this.pageNo= 1;
            this.loadUserData(this.searchKey);
        },
        // 请求数据
        loadUserData(val) {
            let params = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            };
            if (Boolean(val)) {
                params.searchKey = val.trim();
            }
            this.$axios.post(api.findUserList, params).then(res => {
                if (res.data.code) {
                    let ret = res.data.object;
                    this.count = ret.total;                   
                    if(ret.records){
                        this.data1 = ret.records;
                        ret.records.forEach((item, index) => {
                        item.num = this.addZeros(index);
                    });
                    } else {
                        this.data1 = []
                    }                   
                } else {
                    this.$Message.info("没有访问权限");
                }
            });
        },
    }
};
</script>
<style lang="less" scoped>
.adminList {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .container {
        width: 100%;
        margin: 0 auto;
        header {
            width: 100%;
            height: 40px;
            display: flex;
            .w-input {
                width: 250px;
                margin: 0 10px;
            }
        }
        .list {
            width: 100%;
            margin: 10px 0;           
        }
    }
    .page{
        text-align: center;
        margin-top: 20px;
    }
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float: right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
        overflow-x: hidden;
    }
    .btn-group {
        padding-top: 10px;
        text-align: center;
        .left {
            margin-right: 20px;
        }
        .right {
            margin-left: 20px;
        }
    }
    .content {
        text-align: center;
        .tip {
            padding-bottom: 10px;
        }
    }
}
</style>
